<template>
  <div class="body">
    <div class="banner" v-if="bannerList.length > 0">
      <mt-swipe :auto="4000" :continuous="true">
        <mt-swipe-item v-for="(item, index) in bannerList" :key="index">
          <!--                    <a :href="item.link_url">-->
          <!--                        <img :src="item.thumb" alt="">-->
          <!--                    </a>-->
          <router-link :to="item.link_url">
            <img :src="item.thumb" alt />
          </router-link>
        </mt-swipe-item>
      </mt-swipe>
      <img class="kuang" src="../../assets/img/bannerk.png" alt />
    </div>

    <div
      class="club"
      @click="
        $router.push({ path: '/report', query: { text: encodeURI(notice) } })
      "
    >
      <img src="../../assets/img/home_icon_gonggao.png" alt />
      <span>公告 |</span>
      <div class="box">
        <div class="swiperwrap" ref="swilpheight" v-if="report.length > 0">
          <swiper
            :options="swiperOption"
            ref="mySwiper"
            @someSwiperEvent="callback"
          >
            <!-- slides -->
            <swiper-slide v-for="(item, index) in report" :key="index">{{
              item
            }}</swiper-slide>
          </swiper>
        </div>
      </div>
    </div>

    <div class="misbox" v-if="task.to_do_task.length > 0">
      <div>
        <h1>进行中任务</h1>
        <span @click="$router.push({ path: '/mission', query: { id: 2 } })"
          >更多已领取任务</span
        >
      </div>
      <dl
        @click="
          $router.push({
            path: '/steps',
            query: { task_id: item.user_task_id, state: 0 },
          })
        "
        v-for="(item, index) in task.to_do_task"
        :key="index"
      >
        <dd>
          <img :src="item.thumbnail" alt @error="errorImage($event)" />
        </dd>
        <dt>
          <h1 class="ellipsis">{{ item.name }}</h1>
          <h2>{{ item.intro }}</h2>
          <h3>
            <i>{{
              item.complete_remark ? item.complete_remark : '抓紧时间哦'
            }}</i>
          </h3>
          <p>
            ￥{{
              item.is_vip === 1 ? item.vip_task_price : item.task_price | money
            }}
          </p>
          <h4>继续任务</h4>
        </dt>
      </dl>
    </div>

    <div class="misbox" v-if="task.task.length > 0">
      <div>
        <h1>普通任务</h1>
        <span @click="$router.push({ path: '/mission', query: { id: 0 } })"
          >更多普通任务</span
        >
      </div>
      <dl
        @click="$router.push({ path: '/detial', query: { id: item.id } })"
        v-for="(item, index) in task.task"
        :key="index"
      >
        <dd>
          <img :src="item.thumbnail" alt @error="errorImage($event)" />
        </dd>
        <dt>
          <h1 class="ellipsis">{{ item.name }}</h1>
          <h2>{{ item.intro }}</h2>
          <h3>
            <i>{{
              item.complete_remark ? item.complete_remark : '抓紧时间哦'
            }}</i>
          </h3>
          <span
            >￥{{
              item.is_vip === 1 ? item.vip_task_price : item.task_price | money
            }}</span
          >
        </dt>
      </dl>
    </div>

    <div class="misbox" v-if="task.vip_task.length > 0">
      <div>
        <h1>会员任务</h1>
        <span
          @click="$router.push({ path: '/mission', query: { id: 1 } })"
          style="color: #FF462D;"
          >加入会员获取更多权益</span
        >
      </div>
      <dl
        @click="$router.push({ path: '/detial', query: { id: item.id } })"
        v-for="(item, index) in task.vip_task"
        :key="index"
      >
        <dd>
          <img :src="item.thumbnail" alt @error="errorImage($event)" />
        </dd>
        <dt>
          <h1 class="ellipsis">{{ item.name }}</h1>
          <h2>{{ item.intro }}</h2>
          <h3>
            <i>{{
              item.complete_remark ? item.complete_remark : '抓紧时间哦'
            }}</i>
          </h3>
          <span
            >￥{{
              item.is_vip === 1 ? item.vip_task_price : item.task_price | money
            }}</span
          >
        </dt>
      </dl>
    </div>
    <div
      class="beian"
      v-if="
        task.vip_task.length > 0 ||
          task.task.length > 0 ||
          task.to_do_task.length > 0
      "
    >
      <a href="https://beian.miit.gov.cn" style="color:#888888;"
        >沪ICP备2021005737号-1</a
      >
      <!-- <a href="https://beian.miit.gov.cn" style="color:#888888;"
        >鲁ICP备20024911号-1 山东车云链</a
      > -->
    </div>
    <div class="btmBox" style="height: 2.2rem;"></div>
  </div>
</template>
<script>
import { checktoken } from '../../untils/untils';
import { axiosPost } from '../../axios';
import { Toast } from 'mint-ui';
export default {
  name: '',
  data() {
    return {
      notice: '',
      report: [],
      task: {
        task: [],
        to_do_task: [],
        vip_task: [],
      },
      swiperOption: {
        observer: true, //修改swiper自己或子元素时，自动初始化swiper
        observeParents: true, //修改swiper的父元素时，自动初始化swiper
        loop: true,
        autoplay: {
          delay: 1,
          stopOnLastSlide: false,
          disableOnInteraction: false,
        },
        spaceBetween: 0,
        speed: 7000,
        freeMode: true,
        freeModeMomentum: false,
      },
      bannerList: [],
    };
  },
  created() {},
  mounted() {
    checktoken();

    this.$nextTick(() => {
      this.getindextasx();
    });

    if (!sessionStorage.usersesion) {
      this.getuserinfo();
    }

    this.getBanner();

    this.isWeiXinapp((res) => {
      localStorage.isWeiXinapp = res;
    });
  },
  methods: {
    //清除动画
    clearAnimate() {
      if (this.isWeiXin()) {
        if (sessionStorage.openid) {
          document.getElementById('preloader').style.display = 'none';
        } else {
          setTimeout(() => {
            document.getElementById('preloader').style.display = 'none';
          }, 2000);
        }
      } else {
        document.getElementById('preloader').style.display = 'none';
      }
    },
    callback() {},
    //获取首页数据
    getindextasx() {
      axiosPost('index/task_index', {}, (res) => {
        if (res.code === -2) {
          localStorage.removeItem('userinfo');
          location.reload();
          return;
        }
        if (res.code !== 1) {
          localStorage.removeItem('userinfo');
          location.reload();
          return Toast({
            message: res.msg,
            duration: 1000,
          });
        }
        this.report = [];
        this.notice = res.data.notice;
        if (res.data.notice.length > 18) {
          this.report.push(res.data.notice.slice(0, 18));
          this.report.push(res.data.notice.slice(18));
        } else {
          this.report.push(res.data.notice.slice(0, 18));
          this.report.push(res.data.notice.slice(0, 18));
        }
        this.task = res.data.task;
      });
    },
    //获取用户信息
    getuserinfo() {
      if (!localStorage.getItem('userinfo')) {
        return;
      }
      let data = {
        user_id: JSON.parse(localStorage.getItem('userinfo')).user_id,
      };
      axiosPost('users/user_info', data, (res) => {
        if (res.code != 1) {
          localStorage.removeItem('userinfo');
          location.reload();
          return Toast({
            message: res.msg,
            duration: 1000,
          });
        }
        sessionStorage.usersesion = JSON.stringify(res.data);
      });
    },
    //获取轮播图
    getBanner() {
      axiosPost(
        'slideprojector/index',
        {
          type: 1,
        },
        (res) => {
          //console.log(res)
          if (res.code !== 1) {
            return Toast({
              message: res.msg,
              duration: 1000,
            });
          }
          this.bannerList = res.data;
        }
      );
    },
  },
};
</script>

<style scoped lang="less">
@import '../../style/default';
@import '../../style/indexlist';
@import '../../style/swiper.min.css';
.body {
  background: @color4;
}

.beian {
  text-align: center;
  height: 0.3rem;
  line-height: 0.3rem;
  color: #888888;
}

.banner {
  height: 3.5rem;
  position: relative;
  .kuang {
    width: 100%;
    position: absolute;
    bottom: 0;
    left: 0;
  }
  .mint-swipe-item {
    img {
      width: 100%;
    }
    .mint-swipe-indicator {
      width: 0.14rem;
      height: 0.14rem;
      background: rgba(255, 255, 255, 1);
      opacity: 0.4;
      border-radius: 50%;
      display: inline-block;
      margin: 0 0.05rem;
    }
  }
}

.club {
  height: 0.6rem;
  line-height: 0.6rem;
  padding: 0 0.4rem;
  color: @color2;
  font-size: @font28;
  margin-top: 0.2rem;
  margin-bottom: 0.3rem;
  img {
    width: 0.29rem;
    height: 0.24rem;
    margin-top: 0.17rem;
    float: left;
  }
  span {
    margin-left: 0.1rem;
    float: left;
  }
  .box {
    float: left;
    width: calc(100% - 1.3rem);
    height: 0.6rem;
    line-height: 0.6rem;
    margin-left: 0.1rem;
    .swiper-slide {
      overflow: hidden;
      height: 0.6rem;
      margin: 0;
      padding: 0;
    }
  }
}
</style>
